<template>
	<div>
		<span>{{ formattedValue }}</span>
	</div>
</template>

<script lang="ts">
	import { defineComponent, computed } from 'vue';

	export default defineComponent({
		name: 'FormattedNumber',
		props: {
			value: {
				type: [String, Number, null],
				default: null,
			},
		},
		setup(props) {
			/**
			 * 将数字格式化为带有千位分隔符和两位小数的字符串。
			 * 
			 * @param cellValue - 需要格式化的输入值，可以是字符串、数字、null 或 undefined。
			 * @returns 返回格式化后的字符串（带有千位分隔符和两位小数），
			 *          如果输入无效或为空，则返回 undefined。
			 */
			const formatNumber = (cellValue : string | number | null) : string | undefined => {
				// 检查输入是否为 null、undefined 或空字符串
				if (cellValue === null || cellValue === undefined || cellValue === '') {
					return undefined; // 对无效或空的输入返回 undefined
				}

				// 尝试将输入转换为数字
				const numberValue = Number(cellValue);
				if (isNaN(numberValue)) {
					return undefined; // 如果转换为数字失败，返回 undefined
				}

				// 将数字转换为带有两位小数的字符串
				let formattedValue = numberValue.toFixed(2);

				// 移除小数点后多余的零（可选）
				// 例如："123.4500" 会变为 "123.45"
				formattedValue = formattedValue.replace(/\.?0+$/, '');

				// 将值分割为整数部分和小数部分
				const parts = formattedValue.split('.');

				// 为整数部分添加千位分隔符
				// 例如："1234" 会变为 "1,234"
				parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');

				// 将各部分重新组合并返回结果
				return parts.join('.');
			};

			// 使用 computed 属性来格式化值
			const formattedValue = computed(() => {
				return formatNumber(props.value) || ''; // 如果格式化失败，返回空字符串
			});

			return {
				formattedValue,
			};
		},
	});
</script>